<template>
  <div class="fillcontain">
    <el-row :gutter="15">
      <el-col :span="10">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="card-content">
            <div class="card-left">
              <i class="el-icon-menu" />
            </div>
            <div class="card-right">
              <div class="card-num">{{ houseCount }}</div>
              <div>房源总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="card-content">
            <div class="card-left">
              <i class="el-icon-document" />
            </div>
            <div class="card-right">
              <div class="card-num">{{ this.userCount }}</div>
              <div>用户总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--为echarts准备一个具备大小的容器dom-->
    <div id="myChart" style="width: 600px; height: 620px"></div>
    <div id="myChart1" style="width: 600px; height: 280px"></div>
    <div id="myChart2" style="width: 600px; height: 280px"></div>
  </div>
</template>


<script>
import userApi from "@/api/user";
import houseApi from "@/api/house";
import solveApi from "@/api/solve";

export default {
  data() {
    return {
      userCount: 0,
      houseCount: 0,

      housePrice: {
        tooltip: {
          trigger: "axis",
          formatter: function (arg) {
            return (
              arg[0].name +
              "~" +
              (Number(arg[0].name) + 400) +
              "：<br>&nbsp;" +
              arg[0].data +
              "间"
            );
          },
        },
        // 设置图表的标题
        title: {
          show: true,
          text: "房源资产统计",
        },
        // 设置X轴上显示的数据
        xAxis: {
          type: "category",
          data: [
            "0   ",
            "800   ",
            "1200   ",
            "1600   ",
            "2000   ",
            "2400   ",
            "2800   ",
            "3200   ",
          ],
          axisLabel: { interval: 0, rotate: 9 },
        },
        // 设置Y轴上显示的数据, 如果没有设置会根据数据自动填充
        yAxis: {
          // data:[700, 800, 900, 1000, 1100, 1200],
        },
        // 设置图表的数据
        series: [
          {
            // name: "租金",
            type: "bar",
            data: [0, 0, 0, 0, 0, 0, 0, 0],
            showBackground: true,
            barWidth: "98%",
          },
        ],
      },
      solveStatus: {
        tooltip: {
          trigger: "item",
        },
        // 设置图表的标题
        title: {
          show: true,
          text: "故障申报分布图",
        },
        // 设置图表的图例
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 0, name: "未处理" },
              { value: 0, name: "紧急！", itemStyle: { color: "#ff0000" } },
              { value: 0, name: "已处理" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      houseStatus: {
        tooltip: {
          trigger: "item",
        },
        // 设置图表的标题
        title: {
          show: true,
          text: "房屋租金出租状态",
        },
        // 设置图表的图例
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 0, name: "申请中" },
              { value: 0, name: "未出租" },
              { value: 0, name: "已出租" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
    };
  },
  created() {
    this.getProfile();
  },
  methods: {
    getProfile() {
      userApi.getAllUserList().then((res) => {
        if (res.data.flag == true) {
          this.userCount = res.data.data.length;
        } else {
          this.$message({
            message: "获取用户数量失败",
            type: "warning",
          });
        }
      });
      houseApi.getAllHouseList().then((res) => {
        if (res.data.flag == true) {
          this.houseCount = res.data.data.length;
        } else {
          this.$message({
            message: "获取房屋数量失败",
            type: "warning",
          });
        }
      });
    },
    drawBar(id) {
      this.charts = this.$echarts.init(document.getElementById(id));
      houseApi.getAllHouseList().then((res) => {
        if (res.data.flag == true) {
          for (let i = 0; i < res.data.data.length; i++) {
            let price = res.data.data[i].price;
            if (price <= 800) {
              this.housePrice.series[0].data[0]++;
            } else if (800 < price && price <= 1200) {
              this.housePrice.series[0].data[1]++;
            } else if (1200 < price && price <= 1600) {
              this.housePrice.series[0].data[2]++;
            } else if (1600 < price && price <= 2000) {
              this.housePrice.series[0].data[3]++;
            } else if (2000 < price && price <= 2400) {
              this.housePrice.series[0].data[4]++;
            } else if (2400 < price && price <= 2800) {
              this.housePrice.series[0].data[5]++;
            } else if (2800 < price && price <= 3200) {
              this.housePrice.series[0].data[6]++;
            } else if (3200 < price) {
              this.housePrice.series[0].data[7]++;
            }
          }
          this.charts.setOption(this.housePrice);
        } else {
          this.$message({
            message: "获取房屋价格失败",
            type: "warning",
          });
        }
      });
    },
    drawBar1(id) {
      this.charts1 = this.$echarts.init(document.getElementById(id));
      solveApi.getAllSolveList().then((res) => {
        if (res.data.flag == true) {
          for (let i = 0; i < res.data.data.length; i++) {
            let status = res.data.data[i].status;
            if (status == "未处理") {
              this.solveStatus.series[0].data[0].value++;
            } else if (status == "紧急！") {
              this.solveStatus.series[0].data[1].value++;
            } else if (status == "已处理") {
              this.solveStatus.series[0].data[2].value++;
            }
          }
          this.charts1.setOption(this.solveStatus);
        } else {
          this.$message({
            message: "获取故障状态失败",
            type: "warning",
          });
        }
      });
    },
    drawBar2(id) {
      this.charts2 = this.$echarts.init(document.getElementById(id));
      houseApi.getAllHouseList().then((res) => {
        if (res.data.flag == true) {
          for (let i = 0; i < res.data.data.length; i++) {
            let status = res.data.data[i].status;
            if (status == "申请中") {
              this.houseStatus.series[0].data[0].value++;
            } else if (status == "未出租") {
              this.houseStatus.series[0].data[1].value++;
            } else if (status == "已出租") {
              this.houseStatus.series[0].data[2].value++;
            }
          }
          this.charts2.setOption(this.houseStatus);
        } else {
          this.$message({
            message: "获取房屋价格失败",
            type: "warning",
          });
        }
      });
    },
  },

  //调用
  mounted() {
    this.$nextTick(function () {
      this.drawBar("myChart");
      this.drawBar1("myChart1");
      this.drawBar2("myChart2");
    });
  },
};
</script>


<style scoped>
.card-content {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100px;
  padding-left: 20%;
  text-align: center;
}

.card-left {
  display: flex;
  font-size: 3rem;
}

.card-right {
  flex: 1;
  font-size: 14px;
}

.card-num {
  font-size: 30px;
  font-weight: bold;
}

h3 {
  margin: 10px 0;
  text-align: center;
}

.cav-info {
  border-radius: 6px;
  overflow: hidden;
  height: 250px;
  background-color: white;
}

#myChart {
  left: 50px;
  top: 5px;
}

#myChart1 {
  position: absolute;
  left: 650px;
  top: 120px;
}

#myChart2 {
  position: absolute;
  left: 650px;
  top: 420px;
}

.fillcontain {
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
}
</style>
